<template>
  <div class="mobile-setting">
    <div v-if="isMain" class="card-container">
      <div class="main-card" v-for="(item, index) in cardList" :key="index" @click="handleCardClick(index)">
        <img class="card-img" :src="require(`../../../../assets/img/${item.img}.png`)" alt="">
        <div class="content">
          <div class="title">{{item.title}}</div>
          <div class="description">{{item.description}}</div>
        </div>
      </div>
    </div>
    <UserSetting v-if="isUserSetting" :userProp="userProp" @show-main="handleShowMain"></UserSetting>
    <EnginnerSetting v-if="isEngineerSetting" :enjinnerProp="enjinnerProp" @show-main="handleShowMain"></EnginnerSetting>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator'
import continer from '@/common/views/configCommon/ui-modules/handle-wrapper.vue'
import UserSetting from './UserSetting.vue'
import EnginnerSetting from './enginnerSetting.vue'

@Component({
  name: 'mobileSetting',
  components: {
    continer,
    UserSetting,
    EnginnerSetting
  }
})
export default class MobileSetting extends Vue {
  private isUserSetting: boolean = false
  private isEngineerSetting: boolean = false
  private propertyForm: any
  private cardList: any[] = [
    {
      img: 'user',
      title: '用户移动端',
      description: '用于配置用户访问页面及登录方式'
    },
    {
      img: 'enginner',
      title: '工程师移动端',
      description: '用户工程师移动端的相关配置'
    }
  ]

  private get isMain () {
    if (!this.isUserSetting && !this.isEngineerSetting) {
      return true
    } else {
      return false
    }
  }

  private handleCardClick (index) {
    if (index) {
      this.isEngineerSetting = true
    } else {
      this.isUserSetting = true
    }
  }

  private handlePropertyChange (val) {
    this.propertyForm = val
  }

  public handleShowMain (val) {
    if (val === 'user') {
      this.isUserSetting = false
    } else {
      this.isEngineerSetting = false
    }
  }
}
</script>
<style lang="stylus" scoped>
  .mobile-setting
    height 100%
    width 100%
    background #FFFFFF
    box-shadow 0px 0px 4px 0px #E0E6F0, 0px 1px 4px 0px #E0E6F0
    border-radius 10px
    .card-container
      position relative
      top 100px
      text-align center
      display flex
      justify-content center
      .main-card:first-child
        margin-right 40px
      .main-card
        padding 20px 24px
        display flex
        width 400px
        height 100px
        background #FFFFFF
        border 1px solid #E7E9ED
        box-shadow 0px 1px 8px 0px rgba(224, 230, 240, 0.7)
        border-radius 10px
        cursor pointer
        .card-img
          width 60px
          height 60px
          margin-right 18px
        .content
          flex-grow 1
          text-align left
          .title
            height 30px
            line-height 30px
            font-size 14px
            font-family PingFang SC
            font-weight 600
            color #303753
          .description
            height 30px
            line-height 30px
            font-size 12px
            font-family PingFang SC
            font-weight 400
            color #767E91
</style>
